<template>
  <section class="msite">
    <!--首页头部-->
  <HeaderTop v-bind:title="address.name">
    <router-link class="header_search" slot="left" to="/search">
        <i class="iconfont icon-sousuo"></i>
    </router-link>  
    <router-link class="header_login" slot="right" :to="userInfo._id?'/userInfo':'/login'">
        <span class="header_login_text" v-if="!userInfo._id">登录|注册</span>
        <i class="iconfont icon-person" v-else></i>
    </router-link>
  </HeaderTop> 
    <!--首页导航-->
    <nav class="msite_nav" v-if="categorys.length">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(categorys,index) in categoryArr" :key="index">
            <a href="javascript:" class="link_to_food" v-for="(category,index) in categorys" :key="index">
              <div class="food_container">
                <img :src="baseImgUrl+category.image_url" />
              </div>
              <span>{{category.title}}</span>
            </a> 
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </nav>
    <div v-else><img src="./images/msite_back.svg" alt="back"></div>
    <!--首页附近商家-->
    <ShopList></ShopList>
  </section>
</template>

<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop'
import ShopList  from '../../components/ShopList/ShopList'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import {mapState} from 'vuex'
export default {
  name: "",
  data() {
    return {
       baseImgUrl: 'https://fuss10.elemecdn.com'
    };
  },
  methods: {},
  mounted(){
    //初始化食品列表
    this.$store.dispatch("getCategorys");
    //获取商铺列表
    this.$store.dispatch("getShops");
  },
  watch:{
    categorys(newVal,oldVal){ //categorys数组中有数据了,在异步更新之前
           //实例化一个swiper对象
         //界面更新就立即创建swpier对象
         this.$nextTick(()=>{
            let mySwiper = new Swiper ('.swiper-container', {
              direction : 'horizontal',  
              loop: true, // 循环模式选项
              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
              },
            })  
         })
    }
  },
  computed:{
    ...mapState(['address','categorys','userInfo']),
    categoryArr(){
      //解构出data中的categorys
      const {categorys} = this;
      //准备空的二维数组
      let arr = [];
      //准备一个小数组(最大长度为8)
      let minArr = [];
      //遍历categorys
      categorys.forEach(c => {
        //如果当小数组已经满了
        if(minArr.length===8){
          minArr = [];
        }
        //如果minArr是空的,将小数组保存到大数组
        if(minArr.length ===0){
          arr.push(minArr);
        }
        //当前分类保存到小数组
        minArr.push(c);
      });
      return arr;
    }
  },
  components: {
    HeaderTop,
    ShopList
  }
};
</script>
<style  lang='stylus' rel='stylesheet/stylus'>
@import "../../common/stylus/mixins.styl"
    .msite  //首页
          width 100%
          .header
            background-color #02a774
            position fixed
            z-index 100
            left 0
            top 0
            width 100%
            height 45px
            .header_search
              position absolute
              left 15px
              top 50%
              transform translateY(-50%)
              width 10%
              height 50%
              .icon-sousuo
                font-size 25px
                color #fff
            .header_title
              position absolute
              top 50%
              left 50%
              transform translate(-50%, -50%)
              width 50%
              color #fff
              text-align center
              .header_title_text
                font-size 20px
                color #fff
                display block
            .header_login
              font-size 14px
              color #fff
              position absolute
              right 15px
              top 50%
              transform translateY(-50%)
              .header_login_text
                color #fff
          .msite_nav
            bottom-border-1px(#e4e4e4)
            margin-top 45px
            height 200px
            background #fff
            .swiper-container
              width 100%
              height 100%
              .swiper-wrapper
                width 100%
                height 100%
                .swiper-slide
                  display flex
                  justify-content center
                  align-items flex-start
                  flex-wrap wrap
                  .link_to_food
                    width 25%
                    .food_container
                      display block
                      width 100%
                      text-align center
                      padding-bottom 10px
                      font-size 0
                      img
                        display inline-block
                        width 50px
                        height 50px
                    span
                      display block
                      width 100%
                      text-align center
                      font-size 13px
                      color #666
              .swiper-pagination
                >span.swiper-pagination-bullet-active
                  background #02a774
</style>